<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实现video视频列表组件</title>
    <style>
        .videoContent{
            width:70%;
            height:40%;
            overflow: hidden;
            float:left;
        }
        .videoContentRele{
            width:100%;
            height:100%;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .video1{
            width:100%;
            height:90%;
        }
        .buttonGroup{
            width:100%;
            overflow: hidden;
        }
        .buttonGroup1{
            margin-top:5px;
        }
        .errorText{
            position: absolute;
            left:1%;
            top:1%;
            color:red;
        }
        .progressGroup{
            width:100%;
            height:20px;
            overflow: hidden;
        }
        .progressGroupRele{
            width:100%;
            height:100%;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        .playPercent {
            width: 100%;
        }
        .progress {
            width: 100%;
            height: 5px;
            left: 0px;
        }
        .playPercent{
            margin:0;
            float:left;
        }
        .progressValue {
            width: 0%;
            height: 5px;
            cursor: default;
        }
        .showTime{
            line-height: 39px;
            margin-left: 15px;
        }
        .muted{
            width:40px;
            height:40px;
            border:none;
            background: none;
            outline: none;
            float:left;
            position: relative;
            margin-right:0.5%;
            cursor: pointer;
        }
        .mutedRight{
            float:right;
        }
        .muted svg{
            width:100%;
            height:100%;
        }
        .mutedMax svg{
            width: 115%;
            height: 115%;
            position: absolute;
            top: -6%;
            left: -5%;
        }
        .mutedMax2 svg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: -3%;
            left: 0%;
        }
        .canvasContent{
            width:50%;
            height:auto;
        }
        .canvasContent canvas{
            width:100%;
            height:100%;
        }
        .buttonLeft{
            float:left;
            width:210px;
        }

        /* css3 border实现播放器按钮 */
        .playContainer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
        .playContainer li {
            position: relative;
            float: left;
            border: 25px solid #404040;
            color: #404040;
            height: 0;
            width: 0;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            -o-border-radius: 100%;
            border-radius: 100%;
            margin: 0 20px;
        }
        .playContainer button {
            border-style: solid;
            text-indent: -9999px;
            position: absolute;
            top: -8px;
            left: -3px;
            background: none;
            margin: 0;
            padding-right: 1px;
            outline: none; 
        }
        .playBtn button {
            border-color: transparent transparent transparent #fff;
            border-width: 8px 0 8px 12px;
            width: 0;
            height: 0;
        }
        .pauseBtn button {
            border-color: transparent white;
            border-width: 0 6px;
            height: 15px;
            width: 6px;
            left: -9px;
        } 
        .videoContentRele:hover .playContainer{
            display: block;
        }

        /* chrome下 视频进度条样式*/
        progress{
            width: 168px;
            height: 6px;
            color:rgb(255, 51, 0);
            background:#EFEFF4;
            border-radius: 0.1rem;
        }
        /*表示总长度背景色*/
        progress::-webkit-progress-bar{     
            background-color: #d4d1d1;
            border-radius: 0.2rem;
        }
        /*表示已完成进度背景色*/
        progress::-webkit-progress-value{
            background: #f13405;
            border-radius: 0.2rem; 
        }

        /* firefox下 视频进度条样式
        progress{
            width: 168px;
            height: 5px;
            color:#f00;
            background:#EFEFF4;     表示总长度背景色
        }
        表示已完成进度背景色 
        progress::-moz-progress-bar{
            background-color:#f00;
        }*/

        /* IE10以上 
        progress{
            width: 168px;
            height: 5px;
            color:#f00;      表示已完成进度背景色
            background:red;     表示总长度背景色 
        }*/

        /* 音量调节滑块 */
        .volumeSlider{
            float:right;
            width:150px;
            overflow: hidden;
        }
        .volumeController {
            width: 100px;
            height: 40px;
            position: relative;
            float:left;
        }
        .volumeBar {
            width: 100px;
            height: 6px;
            border-radius: 3px;
            background: #cccccc;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            cursor: pointer;
        }
        .volumeBox {
            width: 12px;
            height: 12px;
            background: #f5500f;
            position: absolute;
            bottom: 0;
            top: 0;
            margin: auto 0;
            border-radius: 50%;
            cursor: pointer;
            transition: left 0.1s linear 0s;
        }

        /* 视频列表样式 */
        .videoListContent{
            float:left;
            width:30%;
            overflow: hidden;
        }
        .videoPicture{
            width:48%;
            height:20%;
            margin:0 0 1% 1%;
            float:left;
            overflow: hidden;
            cursor: pointer;
        }
        .videoPrctureRele{
            width:100%;
            height:100%;
            overflow: hidden;
            position: relative;
        }
        .videoPrctureRele .playContainer{
            display:block;
            top: 40%;
        }
        .videoPrctureRele .playContainer li {
            border: 16px solid #404040;
            opacity: 0.65;
        }
        .videoPrctureRele .playBtn button {
            border-color: transparent transparent transparent #fff;
            border-width: 6px 0 6px 8px;
            width: 0;
            height: 0;
        }
        .imgContent{
            width:100%;
            height:8vw;
            overflow: hidden;
        }
        .titleContent{
            width:100%;
            overflow: hidden;
            line-height: 26px;
            text-align: center;
        }
        .picture{
            width:100%;
            height:100%;
            display: block;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="videoContent" class="videoContent">
        <div class="videoContentRele">

            <!-- 显示错误信息 -->
            <span class="errorText" v-show='errorText != ""'>{{errorText}}</span>

            <!-- 视频控件 -->
            <video class="video1" :src="videoSrc" width="800" ref="video" @click="togglePlay">您的浏览器不支持video元素</video>

            <!-- 播放按钮 -->
            <section class="playContainer">
                <li class="playBtn" v-show="!videoPlayFlag" @click="play">  
                 <button type="button" title="start" :disabled="buttonDisabled">Start</button>  
                </li>  
                <li class="pauseBtn" v-show="videoPlayFlag" @click="paused">  
                 <button type="button" title="pause" :disabled="buttonDisabled">Pause</button>  
                </li>  
            </section>  
            
        </div>

        <!-- 按钮组 -->
        <div class="buttonGroup buttonGroup1">

            <!-- 播放进度组 -->
            <div class="progressGroup" @mouseover="progress_mouseover" @mouseout="progress_mouseout">
                <div class="progressGroupRele">
                    <progress class="playPercent" max=100 ref="playPercent">
                        <div class="progress" ref="progress">
                            <div class="progressValue" :style="{'width':videoProgressWidth + '%'}"></div>
                        </div>
                    </progress>
                </div>
            </div>
            
        </div>

        <div class="buttonGroup">

            <!-- 截图按钮 -->
            <button type="button" @click="catchPicture" class="muted mutedRight" :disabled="buttonDisabled">
                <svg t="1607579794663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="12634" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                    <path
                        d="M972.8 836.267h-34.133V153.6c0-18.842-15.292-34.133-34.134-34.133H153.6V34.133C153.6 15.292 138.308 0 119.467 0S85.333 15.292 85.333 34.133v85.334H51.2c-18.842 0-34.133 15.291-34.133 34.133s15.291 34.133 34.133 34.133h34.133V870.4c0 18.842 15.292 34.133 34.134 34.133H870.4v85.334c0 18.841 15.292 34.133 34.133 34.133s34.134-15.292 34.134-34.133v-85.334H972.8c18.842 0 34.133-15.291 34.133-34.133s-15.291-34.133-34.133-34.133z m-819.2 0V187.733h716.8v648.534H153.6z"
                        fill="" p-id="12635"></path>
                    <path
                        d="M273.067 358.4a4 4 0 1 0 136.533 0 4 4 0 1 0-136.533 0zM818.193 726.306L716.851 455.595c-2.526-6.725-8.294-11.145-15.599-11.93-7.287-0.785-13.892 2.321-17.869 8.346L568.747 627.029c-5.223 7.953-15.531 10.752-24.2 6.554l-196.353-95.386c-8.653-4.198-18.978-1.416-24.183 6.537l-116.6 177.988c-3.806 5.82-4.045 12.647-0.648 18.705s9.438 9.506 16.503 9.506H800.58c6.332 0 11.742-2.747 15.377-7.833 3.618-5.086 4.404-10.991 2.236-16.794z"
                        fill="" p-id="12636"></path>
                </svg>
            </button>
            <!-- 音量大小滑块 -->
            <div class="volumeSlider">
                <!-- 静音按钮 -->
                <button type="button" @click="setMute" class="muted noMarginRight" :disabled="buttonDisabled">
                    <svg v-show="muted" t="1607577104978" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3125" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path
                            d="M225.680461 326.598406c-0.419556-0.019443-0.818645-0.019443-1.237177-0.019443L101.812315 326.578963c-22.753213 0-40.876989 18.24248-40.876989 40.777729l0 286.336424c0 22.534226 18.302855 40.777729 40.876989 40.777729l122.629945 0c0.079818 0 0.119727 0 0.198521 0l0 0.157589 300.289204 194.444551c7.125281 6.108115 16.405645 9.781784 26.526143 9.781784 22.573111 0 40.874943-18.301831 40.874943-40.878013 0-1.87572-0.119727-3.711532-0.360204-5.509481L591.970868 168.58151c0.239454-1.795902 0.360204-3.632737 0.360204-5.509481 0-22.574135-18.302855-40.876989-40.874943-40.876989-9.301853 0-17.884322 3.113921-24.750707 8.343015L225.680461 326.598406zM859.567485 510.524392l91.952248-91.951225c11.495822-11.517311 11.576663-30.558993-0.13917-42.274826-11.795651-11.795651-30.636764-11.755742-42.273802-0.140193l-91.953272 91.953272-91.950202-91.953272c-11.639085-11.616572-30.479175-11.655458-42.275849 0.140193-11.715833 11.715833-11.633968 30.757514-0.13917 42.274826l91.952248 91.951225-91.952248 91.953272c-11.494799 11.515265-11.576663 30.556946 0.13917 42.272779 11.796674 11.796674 30.636764 11.756765 42.275849 0.140193l91.950202-91.951225 91.953272 91.951225c11.636015 11.617595 30.477129 11.657504 42.273802-0.140193 11.715833-11.714809 11.634991-30.757514 0.13917-42.272779L859.567485 510.524392z"
                            p-id="3126"></path>
                    </svg>
                    <svg v-show="!muted" t="1607577833208" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6589" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path
                            d="M218.495828 334.609871c-0.390903-0.019443-0.773619-0.019443-1.164522-0.019443L100.022553 334.590428c-21.744233 0-39.087227 17.448394-39.087227 39.001269l0 273.866415c0 21.551852 17.505699 38.999223 39.087227 38.999223l117.308753 0c0.057305 0 0.113587 0 0.171915 0l0 0.153496 287.22056 185.975668c6.824429 5.842055 15.691377 9.354042 25.370831 9.354042 21.590737 0 39.096437-17.505699 39.096437-39.095413 0-1.794879-0.124843-3.551896-0.354064-5.270027L568.836985 183.473685c0.229221-1.718131 0.354064-3.475148 0.354064-5.269004 0-21.590737-17.505699-39.096437-39.096437-39.096437-8.895601 0-17.105586 2.977821-23.682375 7.979742L218.495828 334.609871z"
                            p-id="6590"></path>
                        <path
                            d="M757.858012 953.491133l0.085958 0.075725c123.876332-107.514689 202.211445-266.13329 202.211445-443.041442 0-177.214121-78.603219-336.062965-202.851011-443.61654l-0.11461 0.11461c-4.963035-3.817955-11.17655-6.109138-17.925255-6.109138-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.757914 2.28095 12.981662 6.109138 17.926278l-0.333598 0.342808c0.821715 0.706081 1.641383 1.393743 2.462075 2.119267 1.173732 1.202385 2.452865 2.329045 3.817955 3.321652 110.054535 96.710622 179.51349 238.550071 179.51349 396.578224 0 158.02713-69.458955 299.866578-179.51349 396.577201-1.36509 0.99363-2.644223 2.118244-3.817955 3.321652-0.600681 0.533143-1.212618 1.048889-1.822508 1.564635l0.229221 0.230244c-4.152577 5.058203-6.643304 11.530614-6.643304 18.593474 0 16.188704 13.124925 29.321816 29.322839 29.321816C746.317165 960.134437 752.798786 957.651896 757.858012 953.491133z"
                            p-id="6591"></path>
                        <path
                            d="M713.998085 729.35433l0.23843 0.24764c55.380308-56.43022 89.532129-133.76454 89.532129-219.077577 0-85.409229-34.228569-162.800853-89.704045-219.249493l-0.268106 0.267083c-4.886287-3.64604-10.966773-5.821589-17.543561-5.821589-16.197914 0-29.322839 13.133112-29.322839 29.321816 0 6.566556 2.166339 12.657274 5.822612 17.544585l-0.162706 0.170892c0.773619 0.782829 1.547239 1.584078 2.310625 2.38635 0.075725 0.076748 0.152473 0.171915 0.23843 0.248663 43.3626 45.587268 69.983911 107.248629 69.983911 175.132716 0 67.884087-26.621311 129.544425-69.983911 175.131693-0.085958 0.077771-0.162706 0.171915-0.23843 0.24764-0.706081 0.74599-1.422396 1.471514-2.13871 2.214435l0.144286 0.134053c-3.751441 4.926196-5.976108 11.092639-5.976108 17.754363 0 16.188704 13.124925 29.321816 29.322839 29.321816C702.925912 735.328391 709.072913 733.113957 713.998085 729.35433z"
                            p-id="6592"></path>
                    </svg>
                </button>
                <!-- 音量滑块 -->
                <div ref="volumeController" class="volumeController">
                    <div ref="volumeBar" class="volumeBar">
                        <div ref="volumeBox" class="volumeBox"></div>
                    </div>
                </div>
            </div>
            <!-- 速度控制按钮 -->
            <button type="button" @click="fastSpendPlay(3)" class="muted mutedRight" :disabled="buttonDisabled">3X</button>
            <button type="button" @click="fastSpendPlay(2)" class="muted mutedRight" :disabled="buttonDisabled">2X</button>
            <button type="button" @click="fastSpendPlay(1)" class="muted mutedRight" :disabled="buttonDisabled">标准</button>
            <button type="button" @click="slowPlay" class="muted mutedRight" :disabled="buttonDisabled">{{slowMotion?'恢复':'慢放'}}</button>

            <div class="buttonLeft">
                <!-- 播放按钮 -->
                <button v-show="!videoPlayFlag" type="button" @click="play" class="muted mutedMax2" :disabled="buttonDisabled">
                    <svg t="1607757681997" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="3138" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                        <path
                            d="M732.502883 465.602819c-107.883492-82.3454-215.772403-164.681769-323.652282-247.014525-38.414608-29.327534-93.780555-1.929039-93.780555 46.396277v494.029051c0 48.325316 55.365948 75.725617 93.780555 46.398084 107.87988-82.332757 215.76879-164.669126 323.652282-247.014525 30.61356-23.357989 30.61356-69.436372 0-92.794362z"
                            fill="#231815" p-id="3139"></path>
                    </svg>
                </button>
                <button v-show="videoPlayFlag" type="button" @click="paused" class="muted mutedMax2" :disabled="buttonDisabled">
                    <svg t="1607757755910" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="5137" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                        <path
                            d="M428.539658 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661L285.613458 862.501816c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L428.539658 833.494155z"
                            p-id="5138"></path>
                        <path
                            d="M760.124635 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661l-113.918539 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L760.124635 833.494155z"
                            p-id="5139"></path>
                    </svg>
                </button>
                <!-- 播放时间 -->
                <span class="showTime" v-show="showProgressTime">{{videoCurrentTime}} / {{videoDuration}}</span>
            </div>

        </div>

        <!-- 视频截图 -->
        <div class="canvasContent" v-show="showCanvas">
            <h5>截图预览：</h5>
            <canvas ref="canvas"></canvas>
        </div>
    </div>

    <!-- 右侧视频列表 -->
    <div id="videoListContent" class="videoListContent">
        <div class="videoPicture" v-for="(vl,index) in videoList" :key="vl.id" @click="clickGoToVideo(vl)">
            <div class="videoPrctureRele">
                <div class="imgContent">
                    <img :src="vl.imgSrc" :alt="vl.title" class="picture"/>
                </div>
                <div class="titleContent">{{vl.title}}</div>

                <!-- 播放按钮 -->
                <section class="playContainer">
                    <li class="playBtn">  
                        <button type="button" title="start">Start</button>  
                    </li>
                </section>  
            </div>
        </div>
    </div>

    <script>
        var vue_example = new Vue({
            el:'#videoContent',
            data:{
                video:null, //播放器对象
                videoSrc:'',   //视频播放地址
                loadVideoFlag:false,    //视频加载状态
                speed:1, //初始化播放速度为1
                volume:1, //初始化音量为1
                muted:false, //初始化是否静音，false为不静音
                direction:1, //用于控制回放功能
                errorText:'', //错误信息
                videoPlayFlag:false,    //视频播放状态，ture为播放中
                buttonDisabled:true,   //除了播放按钮，其他按钮的禁用状态
                videoCurrentTime:'00:00:00',   //已播放时间
                videoDuration:'00:00:00',      //视频总时长
                videoProgressWidth:null,    //控制进度条大小
                showProgressTime:false, //是否显示videoCurrentTime和videoDuration
                slowMotion:false,   //慢动作状态
                showCanvas:false,   //显示截图层
                functionId:null,    //播放时的计时器状态
                autoPlay:false, //自动播放
                /* 拖动音频大小 */
                boxL: null,
                newL: null,
                moveL: null,
                mouseX: null,
                left: null,
                cha: 0,
                index: 0,    //标记状态
                volumeBar: null, //拖动条对象
                volumeBox: null, //拖动杆对象
                volumeController: null,  //当前拖动父层
                evt: null,   //本身的事件
                volumeDefault: 100,    //默认声音大小，0~100
            },
            methods:{
                //第一次初始化
                defaultInitVideo(v){
                    if(window.HTMLVideoElement){
                        //获取播放器对象
                        this.video = this.$refs.video;
                        //初始化音频url
                        this.videoSrc = v.url;
                        //关闭自动播放
                        this.autoPlay = false;

                        console.log("初始化中……");

                        //初始化播放属性
                        this.initVideoAttr();
                        //监听加载错误事件
                        this.video.addEventListener("error", this.isError, false);
                        //监听播放时的事件
                        this.video.addEventListener('play', this.videoPlay, false);
                        //监听暂停时的事件
                        this.video.addEventListener('pause', this.videoPause, false); 
                        //监听播放完毕事件
                        this.video.addEventListener('ended', this.videoEnded, false);
                        //监听播放进度位置改变时的事件
                        this.video.addEventListener('timeupdate', this.updateProgress, false); 
                        //数据加载成功
                        this.video.addEventListener('loadeddata', (a) => {
                            console.log("加载数据成功");
                            
                            //显示视频按钮、信息
                            this.buttonDisabled = false;
                            this.showProgressTime = true;
                            
                            //初始化音量大小拖动
                            this.initVolumeController();

                            //自动播放
                            if(this.autoPlay){
                                this.play();
                            }
                        });
                        
                        this.$refs.playPercent.onclick = this.progress_gotoPosition;
                        this.$refs.progress.onclick = this.progress_gotoPosition;

                    }else{
                        this.showProgressTime = false;
                        this.buttonDisabled = true;
                        alert('您的浏览器不支持视频播放器，推荐下载最新谷歌浏览器再试');
                    }
                },
                //播放器初始化
                initVideo(v){
                    //初始化播放属性
                    this.initVideoAttr();

                    //更新播放地址
                    this.videoSrc = v.url;

                    //显示视频按钮
                    this.buttonDisabled = false;
                },
                //初始化播放属性
                initVideoAttr(){
                    this.video.loadVideoFlag=false;    //视频加载状态
                    this.video.speed=1; //初始化播放速度为1
                    this.video.volume=1; //初始化音量为1
                    this.video.muted=false; //初始化是否静音，false为不静音
                    this.video.duration=1; //初始化播放进度值为1，用于控制回放功能
                    this.errorText=''; //错误信息
                    this.videoPlayFlag=false;    //视频播放状态，ture为播放中
                    this.buttonDisabled=true;   //除了播放按钮，其他按钮的禁用状态
                    this.videoCurrentTime=null;   //已播放时间
                    this.video.videoDuration=null;      //视频总时长
                    this.videoProgressWidth=null;    //控制进度条大小
                    this.showProgressTime=false; //是否显示videoCurrentTime和videoDuration
                    this.slowMotion=false;   //慢动作状态
                    this.showCanvas=false;   //显示截图层
                    this.functionId=null;    //播放时的计时器状态
                    this.video.playbackRate=1;  //播放速度
                    this.video.currentTime=0;   //已播放时间
                    this.$refs.playPercent.value=0;   //播放进度
                },
                //获取播放器错误
                isError(){
                    let error = this.video.error;
                    if(error){
                        switch (error.code) {
                            case 1:
                                this.loadVideoFlag = false;
                                this.errorText = "视频的下载过程被中止。";
                                break;
                            case 2:
                                this.loadVideoFlag = false;
                                this.errorText = "网络发生故障，视频的下载过程被中止。";
                                break;
                            case 3:
                                this.loadVideoFlag = false;
                                this.errorText = "解码失败。";
                                break;
                            case 4:
                                this.loadVideoFlag = false;
                                this.errorText = "媒体资源不可用或媒体格式不被支持。";
                                break;
                        }
                    }else{
                        //视频加载成功
                        this.loadVideoFlag = true;
                        //恢复其他按钮
                        this.buttonDisabled = false;
                        //进度条
                        this.updateProgress();
                    }
                },
                //播放、暂停
                play(){
                    if(this.buttonDisabled){return false;}
                    this.video.play();
                    this.videoPlayFlag = true;
                },
                //暂停
                paused(){
                    if(this.buttonDisabled){return false;}
                    this.video.pause();
                    this.videoPlayFlag = false;
                },
                //切换播放状态
                togglePlay(){
                    if(this.buttonDisabled){return false;}
                    if(!this.videoPlayFlag){
                        this.video.play();
                        this.videoPlayFlag = true;
                    }else{
                        this.video.pause();
                        this.videoPlayFlag = false;
                    }
                },
                //计算视频总时长，更新当前已播放时长
                updateProgress() {
                    if (!isNaN(this.video.duration)){
                        var value = Math.round((Math.floor(this.video.currentTime) / Math.floor(this.video.duration)) * 100, 0);
                        this.$refs.playPercent.value = value;
                        this.videoProgressWidth = value + "%";
                        this.videoCurrentTime = this.calcTime(Math.floor(this.video.currentTime));
                        this.videoDuration = this.calcTime(Math.floor(this.video.duration));
                    }
                },
                //播放进度的计算方法
                calcTime(time) {
                    var hour, minute,second;
                    hour = String(parseInt(time / 3600, 10));
                    if (hour.length == 1) hour = '0' + hour;
                    minute = String(parseInt((time % 3600) / 60, 10));
                    if (minute.length == 1) minute = '0' + minute;
                    second = String(parseInt(time % 60, 10));
                    if (second.length == 1) second = '0' + second;
                    return hour + ":" + minute + ":" + second;
                },
                //播放完毕后，用于恢复初始状态的方法
                videoEnded(ev) {
                    this.video.currentTime = 0;
                    this.video.pause();
                    this.videoPlayFlag = false;
                    this.updateProgress();
                },
                //鼠标移动到进度条上时显示已播放时间和总播放时长
                progress_mouseover(ev) {
                    if(!this.loadVideoFlag) return false;
                    this.showProgressTime = true;
                    this.videoCurrentTime = this.calcTime(Math.floor(this.video.currentTime));
                    this.videoDuration = this.calcTime(Math.floor(this.video.duration));
                    ev.stopPropagation();
                },
                //鼠标从进度条上离开时隐藏已播放时间和总播放时长
                progress_mouseout(){
                    if(!this.loadVideoFlag) return false;
                    this.showProgressTime = false;
                },
                //视频播放回调函数
                videoPlay(ev) {
                    // if (this.direction == -1){
                    //     this.functionId = setInterval(this.playBack1, 200);
                    // }
                },
                //videoPlay的附属方法
                playBack1() {
                    if (this.video.currentTime == 0) {
                        //播放完毕后，清除播放时执行的定时器
                        clearInterval(this.functionId);
                    }else{
                        this.video.currentTime -= 1;
                    }
                },
                //视频暂停回调函数，当暂停时禁用所有按钮
                videoPause(ev) {
                    clearInterval(this.functionId);
                },
                //点击播放进度条，跳转到相应的进度上
                progress_gotoPosition(evt) {
                    var o = window.event || evt; //写事件兼容
                    /*IE和火狐的兼容，获取鼠标相对于目标事件的父元素的内边界在x坐标上的位置*/
                    var coord_X = o.offsetX || o.layerX;
                    let d = this.video.duration;
                    let c = this.$refs.playPercent.clientWidth;
                    if(d == 0){d = 1;}
                    if(c == 0){c = 0.01;}
                    this.video.currentTime = d * (coord_X / c);

                    if(!this.videoPlayFlag){    //如果是还未播放，则转为播放状态，并且更新进度条
                        this.play();
                        this.updateProgress();
                    }else{    //如果为已经在播放，只更新进度条
                        this.updateProgress();
                    }
                },
                //静音
                setMute() {
                    if (!this.video.muted) {
                        this.video.muted = true;
                        this.muted = true;
                        //手动改变滑块位置
                        this.setBoxPosition(0);
                        this.volumeSet(0);
                    }
                    else {
                        this.video.muted = false;
                        this.muted = false;
                    }
                    this.muted = this.video.muted;
                },
                //音量控制
                volumeSet(v) {
                    //拖动音量滑块判断是否静音
                    this.isVolumeMinMax(v);
                    if (v >= 100) { 
                        this.video.volume = 1;
                        return false;
                    }
                    if (v <= 0) { 
                        v = 0; 
                    }
                    this.video.volume = v / 100;
                },
                //拖动音量滑块判断是否静音
                isVolumeMinMax(v){
                    if(v <= 0){
                        this.video.muted = true;
                        this.muted = true;
                    }else{
                        this.video.muted = false;
                        this.muted = false;
                    }
                },
                //初始化音量大小拖动
                initVolumeController() {
                    //初始化拖动音频大小位置
                    this.volumeController = this.$refs.volumeController;
                    this.volumeBar = this.$refs.volumeBar;
                    this.volumeBox = this.$refs.volumeBox;
                    this.cha = this.volumeBar.offsetWidth - this.volumeBox.offsetWidth;
                    this.evt = new Event("change");
                    this.volumeBox.addEventListener("mousedown", this.mouseDownclickHandler);
                    document.addEventListener("mousemove", this.mouseMoveclickHandler)
                    document.addEventListener("mouseup", this.mouseUpclickHandler);
                    document.addEventListener("change", this.changeHandler);
                    this.volumeBar.addEventListener("click", this.clickHandler);
                    //初始化音量、拖动位置
                    this.initVolumeDefault();
                },
                //初始化音量、拖动位置
                initVolumeDefault() {
                    var left = this.volumeBar.offsetWidth - this.volumeBox.offsetWidth;
                    this.volumeBox.style.left = left + 'px';
                    this.volumeSet(this.volumeDefault);
                },
                //音量大小拖动，回调函数
                mouseDownclickHandler(e) {
                    this.index = 1;
                    this.boxL = this.volumeBox.offsetLeft;
                    this.mouseX = e.clientX;//鼠标按下拖动的位置
                },
                //音量大小拖动，回调函数
                mouseMoveclickHandler(e) {
                    if (this.index === 1) {
                        this.moveL = e.clientX - this.mouseX;//鼠标移动
                        this.newL = this.boxL + this.moveL;//left值

                        //判断最小值与最大值
                        if (this.newL < 0) {
                            this.newL = 0;
                        }
                        if (this.newL >= this.cha) {
                            this.newL = this.cha;
                        }
                        // 改变left值
                        this.volumeBox.style.left = this.newL + 'px';
                        // 计算比例
                        var bili = this.newL / this.cha * 100;
                        //console.log('当前位置' + Math.ceil(bili) + '%');
                        this.volumeSet(bili);
                        this.evt.elem = this;//当前指向 对象
                        //document.dispatchEvent(this.evt);//朝谁发送 抛发
                    }
                },
                //音量大小拖动，回调函数
                mouseUpclickHandler(e) {
                    this.index = 0;
                    this.evt.elem = this;//当前指向对象
                    //document.dispatchEvent(this.evt);//朝谁发送 抛发
                },
                //音量大小拖动，回调函数
                clickHandler(e) {
                    var left = e.clientX - this.volumeController.offsetLeft - this.volumeBox.offsetWidth / 2;
                    if (left < 0) {
                        left = 0;
                    }
                    if (left >= this.cha) {
                        left = this.cha;
                    }
                    this.volumeBox.style.left = left + 'px';
                    var bili = left / this.cha * 100;
                    //console.log('当前位置'+ Math.ceil(bili) + '%');
                    this.volumeSet(bili);
                    this.evt.elem = this;//当前指向 对象
                    //document.dispatchEvent(this.evt);//朝谁发送 抛发
                },
                //音量大小拖动，回调函数
                changeHandler(e) {
                    console.log(e);
                },
                //手动改变滑块位置
                setBoxPosition(v){
                    // 改变left值
                    this.volumeBox.style.left = v + 'px';
                },
                //加速播放、减速播放（未使用，改倍速播放和正常播放）
                SpeedController(flag) {
                    if(flag == 'add'){                        
                        /*加速播放方法*/
                        this.video.playbackRate += 1;
                        this.speed = this.video.playbackRate;
                    }
                    if(flag == 'reduce'){
                        /*减速播放方法*/
                        if (this.video.playbackRate < 2){
                            this.video.playbackRate = 2;
                        }
                        this.video.playbackRate -= 1;
                        this.speed = this.video.playbackRate;
                    }
                },
                //倍速播放
                fastSpendPlay(n){
                    this.video.playbackRate = n;
                    this.speed = this.video.playbackRate;
                },
                //慢动作播放
                slowPlay() {
                    !this.slowMotion?this.video.playbackRate = 0.5:this.video.playbackRate = 1;
                    this.speed = this.video.playbackRate;
                    this.slowMotion = !this.slowMotion;
                },
                /*截图方法*/
                catchPicture() {
                    var canvas = this.$refs.canvas;
                    var ctx = canvas.getContext('2d');
                    canvas.width = this.video.videoWidth;
                    canvas.height = this.video.videoHeight;
                    ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
                    this.showCanvas = true;
                }
            }
        });

        //视频列表组件
        var vue_example2 = new Vue({
            el:'#videoListContent',
            data:{
                videoList:[]
            },
            mounted(){
                this.initData();
                vue_example.defaultInitVideo(this.videoList[0]);
            },
            methods:{
                //初始化列表数据
                initData(){
                    let data = [];
                    for(let a=1;a<9;a++){
                        data.push({
                            id:a,
                            title:`视频播放片段${a}`,
                            url:`resourse/${a}.mp4`,
                            imgSrc:`resourse/${a}.jpg`,
                        });
                    }
                    this.videoList = data;
                },
                //点击切换视频
                clickGoToVideo(v){
                    //开启自动播放
                    vue_example.autoPlay = true;
                    //音频控件初始化
                    vue_example.initVideo(v);
                }
            }
        });
    </script>
</body>
</html>